<template>
	<view>
		<image src="/static/serve/bg.png" class="bg" mode=""></image>
		<view class="">
			<plhead :height="headh"></plhead>
			<view class="top">
				<u-status-bar bgColor="#f8f8f8"></u-status-bar>
				<view class="head" :style="{height:headh}">
					<image src="/static/serve/title.png" class="head__title" mode=""></image>
					<image src="/static/jied/tbg.png" style="width: 293rpx;height: 23rpx;" mode=""></image>
				</view>
			</view>
		</view>
		<view class="con">
			<view class="searchbox">
				<view class="searchbox__addr">
					深圳市
				</view>
				<image src="/static/serve/down.png" class="searchbox__down" mode=""></image>
				<view class="searchbox__line">

				</view>
				<input type="text" placeholder="搜索" class="searchbox__inp" />
				<view class="searchbox__btn">
					搜索
				</view>
			</view>
			<view class="sx">
				<view class="sx__item" v-for="(item,index) in sxlist" :key="index">
					{{item.name}}
					<image src="/static/jied/down.png" class="sx__item__d" mode=""></image>
				</view>
			</view>
			<view class="box"
				:style="{height: 'calc(100vh - 3rpx - 79rpx - 17rpx - 50px - 48rpx - 77rpx - '+$u.addUnit($u.getPx(headh) + $u.sys().statusBarHeight + $u.sys().safeAreaInsets.bottom,'px')+')'}">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="box__item" v-for="(item,index) in 10" :key="index">
						<view class="u-flex">
							<view class="box__item__picbox">
								<view class="box__item__picbox__status">
									待接单
								</view>
								<image src="" mode="aspectFill" class="box__item__picbox__pic"></image>
							</view>
							<view class="" style="flex: 1;">
								<view class="u-flex u-flex-y-center u-flex-between">
									<view class="box__item__name">
										变压器安装
									</view>
									<view class="box__item__price">
										160.0
									</view>
								</view>
								<view class="box__item__gg">
									规格名称: 默认
								</view>
								<view class="box__item__gg">
									  期望上门时间
								</view>
								<view class="u-flex u-flex-items-end u-flex-between">
									<view class="box__item__time">
										07月25日 22:00~24:00
									</view>
									<u-button :customStyle="{width:'147rpx',height:'58rpx',padding:0,fontSie:'26rpx',margin:0,}" shape='circle' color="#2EB16C" text="确认接单"></u-button>
								</view>
							</view>
						</view>
						<view class="u-flex-y-center u-flex" style="margin-top: 30rpx;">
							<image src="/static/jied/dw.png" class="box__item__dw" mode=""></image>
							<view class="box__item__jl">
								距3.89km
							</view>
							<view class="box__item__addr">
								服务地址: 山西省太原市小店区13131318
							</view>
							
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 认证弹框 -->
		<u-popup mode="center" :show="show" round="30rpx" @close="show=false">
			<view class="popbox">
				<image src="/static/serve/rzbg.png" class="popbox__bg" mode=""></image>
				<view class="popbox__title">
					高级电工认证
				</view>
				<view class="popbox__tip">
					完成高级认证成为电力专家后解锁当前区域精准客户
				</view>
				<view class="u-flex u-flex-center" style="margin-top: 40rpx;">
					<u-button :customStyle="{width:'345rpx',height:'76rpx',padding:0,fontSie:'32rpx',margin:0,}" shape='circle' color="#0DB467" text="立即认证"></u-button>
				</view>
			</view>
		</u-popup>
		
		<tabbar :current="1"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headh: '103rpx',
				cur: 0,
				sxlist:[
					{name:'位置',val:''},
					{name:'距离',val:''},
					{name:'价格',val:''},
					{name:'分类',val:''},
				],
				show:true
			};
		},
		onLoad() {
			uni.hideTabBar()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.head {
		display: flex;
		align-items: center;
		padding: 0 30rpx;

		// background-color: #f8f8f8;
		&__title {
			width: 64rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	.bg {
		width: 750rpx;
		height: 520rpx;
		position: fixed;
		top: 0;
		left: 0;

	}

	.con {
		padding: 3rpx 30rpx 0;

		.searchbox {
			height: 79rpx;
			background: #FEFEFE;
			border-radius: 37rpx 37rpx 37rpx 37rpx;
			display: flex;
			align-items: center;
			padding: 0 12rpx 0 39rpx;

			&__addr {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #1A1919;
				line-height: 28rpx;
				margin-right: 10rpx;
			}

			&__down {
				width: 16rpx;
				height: 13rpx;
			}

			&__line {
				width: 1rpx;
				height: 25rpx;
				background: #9F9F9F;
				opacity: 0.38;
				margin: 0 18rpx;
			}

			&__inp {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;
				flex: 1;
			}

			&__btn {
				width: 108rpx;
				height: 58rpx;
				background: #07D57E;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FEFEFE;
				line-height: 28rpx;
			}
		}
	}
	.sx{
		height: 77rpx;
		background: #12C375;
		border-radius: 39rpx 39rpx 39rpx 39rpx;
		margin: 23rpx 0 25rpx;
		display: flex;
		align-items: center;
		&__item{
			width: 25%;
			display: flex;
			align-items: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FAFEFC;
			line-height: 30rpx;
			justify-content: center;
			
			&__d{
				width: 16rpx;
				height: 13rpx;
				margin-left: 10rpx;
			}
		}
	}
	.box{
		&__item{
			margin-bottom: 35rpx;
			padding: 34rpx 23rpx 40rpx 26rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			&__picbox{
				width: 168rpx;
				height: 168rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				position: relative;
				margin-right: 20rpx;
				&__pic{
					width: 168rpx;
					height: 168rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					background-color: #896CAD;
				}
				&__status{
					position: absolute;
					top: 0;
					left: 0;
					width: 80rpx;
					height: 40rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 20rpx;
					display: flex;
					align-items: center;
					border-radius: 20rpx 0 20rpx 0;
					z-index: 1;
					justify-content: center;
					background-color: #FF923C;
				}
			}
			&__name{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 30rpx;
				color: #2A2C2C;
				line-height: 30rpx;
			}
			&__price{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #FD3C33;
				line-height: 40rpx;
				&::before{
					content: "￥";
					font-size: 24rpx;
				}
			}
			&__gg{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #727272;
				line-height: 42rpx;
			}
			&__time{
				padding: 0 10rpx;
				display: flex;
				align-items: center;
				height: 45rpx;
				background: #FAFEFC;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 1rpx solid #D0F5E6;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #0DB365;
			}
			&__dw{
				width: 27rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
			&__jl{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 25rpx;
				color: #727272;
				line-height: 25rpx;
				flex: 1;
			}
			&__addr{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #727272;
				line-height: 42rpx;
			}
		}
	}
	.popbox{
		width: 511rpx;
		height: 512rpx;
		position: relative;
		&__bg{
			position: absolute;
			width: 205rpx;
			height: 238rpx;
			top: -36rpx;
			left: 160rpx;
		}
		&__title{
			font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
			font-weight: bold;
			font-size: 36rpx;
			color: #1A1A1A;
			line-height: 36rpx;
			padding: 198rpx 0 40rpx;
			text-align: center;
		}
		&__tip{
			font-family: PingFang-SC, PingFang-SC;
			font-size: 29rpx;
			color: #565656;
			line-height: 42rpx;
			padding: 0 66rpx;
			text-align: center;
		}
	}
</style>